import React, { Component } from 'react'
import { View, Text, Map, Navigator, CoverView, CoverImage } from '@tarojs/components'
import Taro from '@tarojs/taro'
import {get} from '../../utils/http'
import './index.scss'
import center from '../../assets/images/center.png'
import sell from '../../assets/images/sell.png'
import buy from '../../assets/images/buy.png'


export default class Index extends Component {

  constructor() {
    super();
    this.state = {
      longitude: '',
      latitude: '',
      markers: []
    }
  }


  componentDidMount() {

    this.mapContext = Taro.createMapContext('map')
    Taro.getLocation({
      type: 'wgs84',
      success: (res) => {
        this.setState({
          longitude: res.longitude,
          latitude: res.latitude
        })
      }
    });
    this.getMarkers();
  }


  moveToCenter() {
    console.log(0)
    this.mapContext.moveToLocation()
  }

  goPublish() {
    Taro.navigateTo({
      url: '/pages/publish/publish',
    })
  }

  async getMarkers() {
    ///index.php/trade/get_list
    let rs = await get('/index.php/trade/get_list')
    let arr = [];
    rs.data.forEach((item) => {
      arr.push({
        longitude: item.longitude,
        latitude: item.latitude,
        iconPath: item.type === 'buy' ? buy : sell
      })
    })
    this.setState({
      markers:arr
    })

  }



  render() {
    return (
      <View className="container">
        <View className="map">
          <Map id="map" longitude={this.state.longitude}
            latitude={this.state.latitude} scale="14"

            markers={this.state.markers}
            show-location>

            <CoverView className="mapCenter"
              onClick={()=>this.moveToCenter()}
            >
              <CoverImage
                src={center}></CoverImage>
            </CoverView>

          </Map>
        </View>


        <View className="tabbar">
          <View className="publish" onClick={()=>this.goPublish()}>发布</View>
          <View className="search">
            <Navigator url="/pages/search/search" open-type="navigate">
              搜索
        </Navigator>
          </View>
        </View>

      </View>
    )
  }
}
